<template>
  <div>
    <div class="order-body"  v-loading="loading">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="投保成功" name="1"></el-tab-pane>
        <el-tab-pane label="待支付单" name="2"></el-tab-pane>
        <el-tab-pane label="待续投保" name="3"></el-tab-pane>
        <el-tab-pane label="到期保单" name="4"></el-tab-pane>
      </el-tabs>
      <el-form size="mini" :inline="true" style="margin-top: 10px" >
        <el-form-item label="保单号" >
          <el-input placeholder="请输入保单号" v-model="order_no" ></el-input>
        </el-form-item>
        <el-form-item label="被保企业" >
          <el-input placeholder="请输入被保企业" v-model="qiye_name" ></el-input>
        </el-form-item>
        <el-form-item label="被保人员" >
          <el-input placeholder="请输入被保人员姓名或者身份证号码" v-model="key_words" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="com-btn" icon="el-icon-search" @click="changePage(1)" >查询</el-button>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">保单</el-divider>
      <el-table size="mini" :data="list.data" border>
        <el-table-column label="保单号" prop="bd_no" ></el-table-column>
        <el-table-column label="被保人" prop="insure_name" ></el-table-column>
        <el-table-column label="方案" prop="fanan_memo"></el-table-column>
        <el-table-column label="录入日期" prop="create_time"></el-table-column>
        <el-table-column label="保险起期" prop="start_time" ></el-table-column>
        <el-table-column label="保险止期" prop="end_time" ></el-table-column>
        <el-table-column label="订单金额" prop="total_price" ></el-table-column>
        <el-table-column label="状态" >
          <template slot-scope="item" >
            <div style="text-align: center">
              <div>
                <el-link type="success" >{{ item.row.tag }}</el-link>
              </div>
              <div v-if="item.row.state == 2 && activeName != 4">（{{item.row.day}}后到期）</div>
              <div v-if="item.row.state == 2 && activeName == 4">（已到期）</div>
            </div>
          </template> 
        </el-table-column>
        <el-table-column label="操作" width="100px" >
          <template slot-scope="item" >
            <el-button  v-if="activeName == 3" type="text" class="com-btn-txt" size="mini" @click="nextBao(item.row.bx_id,item.row.id)" >续保</el-button>
            <el-button  v-if="item.row.state == 2" type="text" class="com-btn-txt" size="mini" @click="see(item.row.id)" >查看</el-button>
            <el-button  v-if="item.row.state == 2" type="text" class="com-btn-txt" size="mini" @click="toChange(item.row.id)" >批改</el-button>
            <el-button  v-if="item.row.state == 1" type="text" class="com-btn-txt" size="mini" @click="pay(item.row.id)" >支付</el-button>
            <el-button  v-if="item.row.state == 1" type="text" class="com-btn-txt" size="mini" @click="del(item.row.id)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-box">

        <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      activeName : '1',
      order_no : '',
      qiye_name: '',
      key_words:'',
      list:{
        current_page : 1,
        data:[]
      },
      loading:false,
    }
  },
  mounted() {
    if(this.$route.params.type){
      this.activeName = this.$route.params.type.toString();
    }

    this.getDate();
    this.orderviewOrder()
  },
  methods: {
    orderviewOrder() {
      this.ajaxs('order/viewOrder',{
        data:{},
        success:(res) => {
          if (res.code == 1) {
            this.getDate();
          }
        }
      })
    },
    nextBao(id,order_id){
      this.$router.push({
        path:'/index/index/form/'+id,
        query:{
          order_id : order_id,
          is_add : true
        }
      });
    },
    pay(id){
      this.$router.push({
        path : '/index/index/confirm/'+id
      });
    },
    see(id){
      this.$router.push({
        path:'/index/order/detail/'+id
      })
    },
    toChange(id){
      this.$router.push({
        path:'/index/order/detail/'+id+'?type=2'
      })
    },
    handleClick(){
      this.changePage(1);
    },
    changePage(e){
      this.list.current_page = e;
      this.getDate();
    },
    getDate() {
      this.loading = true;
      this.ajaxs('order/index',{
        data:{
          bd_no : this.order_no,
          name : this.qiye_name,
          state : this.activeName,
          page: this.list.current_page,
          key_words:this.key_words
        },
        success:(res) => {
          this.list = res.msg;
          this.loading = false;
        }
      })
    },
    del(id) {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.ajaxs('order/orderDel',{
          data:{id : id,},
          success:(res) => {
            this.toast(res.code,res.msg);
            if(res.code){
              this.getDate();
            }
          }
        })
      }).catch(() => {});

    }
  }
}
</script>

<style scoped>
@import "../../assets/css/order/list.css";
</style>
